/**
* @Description: 活动规则
* @author  tangbin
* @date 2023/3/20
*/

<template>
  <div class="app-containers">
    <query-table-render
        ref="queryTable"
        :query-model="queryModel"
        :table-request="requestTableData"
        :table-column="tableColumns"
        :toolbar-render="toolbarRnd"
        :transform-query="transformQuery"
        :title-render="titleRender"
        @on-operator="onOperator"
    >
      <template v-slot:form>
        <el-form-item label="限制类型" prop="limitType">
          <el-select v-model="queryModel.limitType" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.basic_data_limint_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryModel.status" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.order_class_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        
        
      </template>
    </query-table-render>
  </div>
</template>

<script>
import {checkPermi} from '@/utils/permission.js'
import QueryTableRender from "@/components/QueryTableRender";
import {activityRules} from '@/api/basic/activityRule.js'
export default {
  name: "ActivityRule",
  dicts: ['order_class_status', 'basic_data_customer_type', 'basic_data_limint_type'],
  components: {QueryTableRender},
  data() {
    return {
      queryModel: {},
      tableColumns: [],
    }
  },
  created() {
    this.setupQueryModel();
    this.setupTableColumns();
    // document.getElementById('appMain').style['overflow'] = 'hidden';
    // console.log('appMain=', document.getElementById('appMain'));
  },
  destroyed() {
    console.log('destroyed');
    // document.getElementById('appMain').style['overflow'] = 'auto';
  },
  
  watch: {
    $route(route) {
      if (route.name == 'ActivityRule') {
        this.onRefreshTable();
      }
      
    },
  },
  methods: {
    setupQueryModel() {
      this.queryModel = {
        limitType: undefined, // 限制类型
        status: undefined, // 状态
      };
    },

    setupTableColumns() {
      this.tableColumns = [
        {
          label: '序号',
          // minWidth: '100',
          width: '60',
          type: 'index',
          align:'left',
          increment: true
        },
        {
          prop: 'ruleCode',
          label: '规则编号',
          align:'left',
          minWidth: '180',
        },
        {
          prop: 'customerType',
          label: '包含客户分类',
          align:'left',
          minWidth: '180',
          render: (h, text) => {
            let show = "";
            this.dict.type.basic_data_customer_type.some((item) => {
              if (item.value === text) {
                show = item.label;
                return true;
              }
            });
            return show;
          }
        },
        {
          prop: 'limitType',
          label: '限制类型',
          align:'left',
          minWidth: '120',
          render: (h, text) => {
            let show = "";
            this.dict.type.basic_data_limint_type.some((item) => {
              if (item.value === text) {
                show = item.label;
                return true;
              }
            });
            return show;
          }
        },
        {
          prop: 'limitNum',
          label: '限制次数',
          align:'right',
          minWidth: '100',
        },
        {
          prop: 'status',
          label: '状态',
          align:'left',
          minWidth: '100',
          render: (h, text) => {
            let show = "";
            this.dict.type.order_class_status.some((item) => {
              if (item.value === text) {
                show = item.label;
                return true;
              }
            });
            return show;
          }
        },
        {
          prop: 'remark',
          label: '备注',
          minWidth: '180',
          align:'left',
          showOverflowTooltip: true
        },
        {
          label: '操作',
          width: '120',
          type: 'operator',
          fixed: 'right',
          operators: this.operatorsFunc()
        },
      ];
    },

    /**
     * 渲染功能列表
     * @param {*} h 
     */
     toolbarRnd(h){
      let list = [];
      if (checkPermi(['basic-data:activity-rule:add'])) {
        list.push(<el-button type="primary" icon="el-icon-plus" vOn:click={() => this.onAddLimitRule()}>新增限制规则</el-button>);
      }
      return list;
    },

    /**
     * 操作列表
     */
     operatorsFunc() {
      let list = [];
      if (checkPermi(['basic-data:activity-rule:edit'])) {
        list.push({label: '修改', command: 'edit'});
      }
      if (checkPermi(['basic-data:activity-rule:query'])) {
        list.push({label: '详情', command: 'detail'});
      }
      
      return list;
    },

    /**
     * 标题渲染
     * @param {*} h 
     */
    titleRender(h) {
      return <div>
        <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
        <span style="display: inline-block; color: #333333; font-size: 16px;">单据列表</span>
      </div>;
    },

    /**
     * 修改参数格式
     * @param {*} queryData 
     */
    transformQuery(queryData) {
      let transParams = {}
      for (let keyName in queryData) {
        if (queryData.hasOwnProperty(keyName)) {
          if (keyName === 'createTimeRange') {
            if(queryData['createTimeRange'] && queryData['createTimeRange'].length){
              const [start, end] =  queryData[keyName]
              transParams['startTime'] = dayjs(start).startOf('day').format("YYYY-MM-DD HH:mm:ss")
              transParams['endTime'] = dayjs(end).endOf('day').format("YYYY-MM-DD HH:mm:ss")
            }
          } else {
            transParams[keyName] = queryData[keyName]
          }
        }
      }
      return transParams
    },

    /**
     * 获取数据
     * @param {*} queryParams 
     */
     requestTableData(queryParams) {
        return activityRules(queryParams).then(res => {
          return {
            success: true,
            total: Number(res.data.total),
            data: res.data.records,
          };
        });
     },

     /**
     * 刷新列表
     */
    onRefreshTable(){
      this.$refs['queryTable'].refreshTable()
    },

    /**
     * 搜索列表查询
     */
     searchListQuery() {
      this.$refs['queryTable'].submitQuery();
    },

    /**
     * 操作页面
     * @param {*} command 
     * @param {*} record 
     */
    onOperator(command, record) {
      let query = {
        ruleId: record.id
      };
      if('edit' === command){
        this.$router.push({path: 'ActivityRuleEdit', query: query});
      } else if ('detail' === command) {
        this.$router.push({path: 'ActivityRuleDetail', query: query});
      }
    },

    /**
     * 新增限制规则
     */
    onAddLimitRule() {
      this.$router.push({path: 'ActivityRuleAdd', query: {ruleId: undefined}});
    }

  },
}
</script>

<style lang="scss" scoped>
.hasTagsView {
  .app-main {
    /* 90 = navbar + tags-view = 50 + 40 */
    min-height: calc(100vh - 90px);
    height: calc(100% - 90px) !important;
    width: 100%;
    background-color: #f4f5f7;
    position: absolute;
    top: 90px;
    overflow: hidden;
  }

  // .fixed-header + .app-main {
  //   padding-top: 90px;
  // }
}
// ::v-deep.hasTagsView .app-main {
//   overflow: hidden;
// }
// ::v-deep.app-main {
//   overflow: hidden;
// }
// .app-main {
//   overflow: hidden;
// }
</style>